<template>
  <view id="chooseTime">
    <uni-popup ref="showpopup" type="bottom">
      <view class="pop-cont">
        <view class="uni-padding-wrap">
          <view @click="cancel">取消</view>
          <view class="uni-title">{{chooseDay?chooseDay:'请选择时间'}}  {{chooseTime}}</view>
          <view style="color:#247cf6" @click="sure">确定</view>
        </view>
        <picker-view
         
          :indicator-style="indicatorStyle"
          :value="value"
          @change="bindChange"
        >
          <picker-view-column class="column">
            <view class="item" v-for="(item,index) in weekDays" :key="index">{{item.weekDay}} <br> {{item.date}}</view>
          </picker-view-column>
         
          <picker-view-column class="column">
            <view class="item" v-for="(item,index) in timeArr" :key="index">{{item.time}}</view>
          </picker-view-column>
        </picker-view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
const date = new Date();
import uniPopup from "@/components/uni-popup/uni-popup.vue";
export default {
  components: {
    uniPopup,
  },
  data: function () {
    

    return {
      title: "picker-view",
      value: [0, 0],
      chooseDay:'',
      chooseTime:'',
      indicatorStyle: `height: ${Math.round(
        uni.getSystemInfoSync().screenWidth / (750 / 100)
      )}px;border-top:1px solid #247cf6;border-bottom:1px solid #247cf6`,
    };
  },
  computed:{
    
    weekDays(){
      let timestamp =new Date().getTime()
      let oneDayTime = 1000*24*60*60;
      let week={
          0:'周日',
          1:'周一',
          2:'周二',
          3:'周三',
          4:'周四',
          5:'周五',
          6:'周六',
          7:'今天',
          8:'明天'
      }
      function timestampFc(timestamp,index){
        var d = new Date(timestamp);
        var year=d.getFullYear()
        var month=d.getMonth()+1
        var day=d.getDate()
        let nowWeek = d.getDay()
        if(month<10){
            month='0'+month
        }
        if(day<10){
            day='0'+day
        }
        if(index==0){
          nowWeek = 7
        }else if(index==1){
          nowWeek = 8
        }else{
          nowWeek=d.getDay()
        }
        let html=year + "-" + month + "-" +day
          return {
              fullDate:html,
              weekDay:week[nowWeek],
              date:month + "-" +day
          }
      }
      let someDay =[]
      for(let i = 0;i<7;i++){
        someDay.push(timestampFc((timestamp + oneDayTime *i),i))
      }

      return someDay

    },
    timeArr(){
      const timeArr = []
      for(let i =8;i<=19;i++){
          timeArr.push({time:`${i>9?'':'0'}${i}:00`},{time:`${i>9?'':'0'}${i}:30`})
      }
      timeArr.pop();
      return timeArr
    }
  },
  methods: {
    bindChange: function (e) {
      const val = e.detail.value;
      console.log(e)
      this.chooseTime = this.timeArr[val[1]]['time']
      this.chooseDay = this.weekDays[val[0]]['fullDate']
      
    },
    cancel(){
      this.$refs['showpopup'].close()
    },
    sure(){
      this.$emit("suerTime",`${this.chooseDay} ${this.chooseTime}`)
    }
  },
};
</script>

<style lang="scss" scoped>
#chooseTime {
  .pop-cont {
    background: #fff;
    height: 600rpx;
    font-size: 24rpx;
    .column{
        height: 500rpx;
        text-align: center;
        &:nth-of-type(1){
            background: #eee;
            width: 100px;
            flex-shrink: 0;
            flex: none;
        }
        &:nth-of-type(2){
          // background: #247cf6;
          .uni-picker-view-indicator{
            color: red;
          }
        }
        .item{
          display: flex;
          align-items: center;
          justify-content: center;
        }
    }
    .uni-padding-wrap{
      display: flex;
      justify-content: space-between;
      padding: 20rpx;
      
    }
  }
}
</style>